<template>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="date" label="Date" width="150" />
        <el-table-column prop="name" label="Name" width="120" />
        <el-table-column prop="state" label="State" width="120" />
        <el-table-column prop="city" label="City" width="120" />
        <el-table-column prop="address" label="Address" width="600" />
        <el-table-column prop="zip" label="Zip" width="120" />
        <el-table-column fixed="right" label="Operations" width="120">
            <template #default>
                <el-button link type="primary" size="small" @click="handleClick">Detail</el-button>
                <el-button link type="primary" size="small">Edit</el-button>
            </template>
        </el-table-column>
    </el-table>
    <main>
        <el-row style="margin-bottom: 15px">
            <div class="demo-color-warp">
                <div class="demo-color-box" v-for="(item, key) in colorStore._theme" :key="key"
                    @click="setThemeColor(item.color, item.label)">
                    {{ item.label }}
                </div>
            </div>
            <span>当前主题：{{ themeName }}</span>
        </el-row>
        <el-row class=" mb-4">
            <el-button>Default</el-button>
            <el-button type="primary">Primary</el-button>
            <el-button type="success">Success</el-button>
            <el-button type="info">Info</el-button>
            <el-button type="warning">Warning</el-button>
            <el-button type="danger">Danger</el-button>
        </el-row>

        <el-row class="mb-4">
            <el-button plain>Plain</el-button>
            <el-button type="primary" plain>Primary</el-button>
            <el-button type="success" plain>Success</el-button>
            <el-button type="info" plain>Info</el-button>
            <el-button type="warning" plain>Warning</el-button>
            <el-button type="danger" plain>Danger</el-button>
        </el-row>

        <el-row class="mb-4">
            <el-button round>Round</el-button>
            <el-button type="primary" round>Primary</el-button>
            <el-button type="success" round>Success</el-button>
            <el-button type="info" round>Info</el-button>
            <el-button type="warning" round>Warning</el-button>
            <el-button type="danger" round>Danger</el-button>
        </el-row>
    </main>
</template>
  
<script lang="ts" setup>
const handleClick = () => {
    console.log('click')
}

const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
        tag: 'Home',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
        tag: 'Office',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
        tag: 'Home',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
        tag: 'Office',
    },
]
const el = document.documentElement
// const el = document.getElementById('xxx')

// // 获取 css 变量
// getComputedStyle(el).getPropertyValue(`--el-color-primary`)
// getComputedStyle(el).getPropertyValue(`--el-color-success`)
// getComputedStyle(el).getPropertyValue(`--el-color-danger`)
// getComputedStyle(el).getPropertyValue(`--el-color-warning`)
// getComputedStyle(el).getPropertyValue(`--el-color-error`)
// getComputedStyle(el).getPropertyValue(`--el-color-info`)

// // 设置 css 变量
// el.style.setProperty('--el-color-primary', 'red')
// el.style.setProperty('--el-color-success', 'blue')
// el.style.setProperty('--el-color-warning', 'yellow')
// el.style.setProperty('--el-color-danger', '#144b55')
// el.style.setProperty('--el-color-error', '#E7E7E7')
// el.style.setProperty('--el-color-info', '#f79400')

import { ref } from "vue"
import { useColorStore } from "@/stores/counter";
// ...
const themeName = ref('默认主题');
const colorStore = useColorStore();
// ...

// ...
function setThemeColor(colorMap: any, label: any) {
    themeName.value = label;
    colorStore.setThemeColor(colorMap);
}

</script>
  